<template>
    <view class="">
        <view class="" v-if="ver"><cs></cs></view>
        <view style="background-color: #FFFFFF;padding-bottom: 60rpx;" v-else>
            <view>
                <!-- 轮播图 -->
                <view class="u-demo-wrap">
                    <view class="u-demo-area">
                        <u-toast ref="uToast"></u-toast>
                        <u-swiper :height="650" :list="imgList" :interval="10000" @click="click"></u-swiper>
                    </view>
                </view>
                <!-- 搜索 -->
                <!-- <u-sticky offset-top="500" enable="true">
					<view class="search x-c">
						<view class="search-box x-c shopro-selector-rect">
							<text class="cuIcon-search"></text>
							<text class="search-val">{{ detail.content || '搜索商品' }}</text>
						</view>
					</view>
				</u-sticky> -->
                <!-- 简介框 -->
                <view class="two-box" @click="intoDetail">
                    <image src="../../static/qietu/图层3.png" mode="widthFix"></image>
                    <view style="line-height: 50rpx;">
                        <view style="font-size: 34upx;color: #5a5545;">聚彩简介</view>
                        <view style="color: #817a63;">让你卖得放心，用得安心</view>
                    </view>
                    <view class="chakan">立即查看</view>
                </view>
                <!-- 滑动框 -->
                <view style="font-size: 32upx; font-weight: 550; margin: 40rpx 22rpx"><text>风格 . 系列</text></view>
                <view class="swiper  padding-lr">
                    <block v-for="(item, index) in goodsType" :key="index" class="radius">
                        <view
                            style="width: 610rpx;height: 430rpx;margin: 10rpx 6rpx; position: relative;background-color: #f3f3f3;"
                            class="radius"
                            @click="intofengge(item.name, item.id)"
                        >
                            <image :src="item.image" mode="scaleToFill"></image>
                            <view class="jianyue">{{ item.name }}</view>
                        </view>
                    </block>
                </view>

                <!-- 猜你喜欢 -->
                <view style="font-size: 32upx; font-weight: 550; margin: 40rpx 22rpx"><text>猜你喜欢</text></view>
                <view class="xihuan">
                    <view v-for="(item, index) in goodsList" :key="item.id">
                        <view class="detail-box" @tap="jump('/pages/goods/detail/index', { id: item.id })">
                            <u-lazy-load :image="item.image" mode="aspectFill" imgMode="aspectFill"   height="480"></u-lazy-load>
                            <view>
                                <text>{{ item.title }}</text>
                            </view>
                            <view style="font-size: 32upx;font-weight: 550;">
                                ￥{{ item.activity_type === 'groupon' ? item.groupon_price : item.price }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 自定义底部导航 -->
            <shopro-tabbar></shopro-tabbar>
        </view>
    </view>
</template>

<script>
import cs from '../../components/cs/cs.vue';
import { mapMutations, mapActions, mapState } from 'vuex';

export default {
    components: {
        cs,
    },
    data() {
        return {
            categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
            categoryId: 0, //分类Id
            queryObj: {},
            listParams: {
                page: 1,
            },
            lastPage: 1, //分页总数
            total: 0, //总商品数
            perPage: 0, //单页商品数
            goodsList: [],
            goodsType: [],
            ver: false,

            isRefresh: false,
            detail: {},
            imgList: [],
        };
    },

    computed: {
        ...mapState({
            initData: state => state.init.initData,
            template: state => state.init.templateData?.home,
            hasTemplate: state => state.init.hasTemplate,
            cartNum: state => state.cart.cartNum,
            forceOauth: state => state.user.forceOauth,
        }),
        popupIndex() {
            if (this.initData.popup) {
                return this.initData.popup.content.index;
            }
        },
        info() {
            if (this.initData.info) {
                return this.initData.info;
            }
        },
    },
    onPullDownRefresh() {
        this.init();
    },
    onLoad(options) {
        this.imgList = this.template[1].content.list;
        console.log('template', this.template);
        this.queryObj = options;
        this.getCategory();
        this.categoryId = Number(this.$Route.query.id);
    },
    created() {
        this.getGoodsList();
    },
    mounted() {
        // #ifdef H5
        if (uni.getStorageSync('screenShot')) {
            this.screenShotPreviewImage();
        }
        // #endif
    },

    methods: {
        ...mapMutations(['CART_NUM']),
        ...mapActions(['getAppInit', 'getTemplate']),
        // 初始化
        init() {
            return Promise.all([this.getAppInit(), this.getTemplate()]).then(() => {
                uni.stopPullDownRefresh();
            });
        },

        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path: path,
                query: parmas,
            });
        },

        /**
         * 获取分类数据
         *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
         */
        getCategory() {
            var that = this;
            this.$api('categoryGoods', { category_id: NaN }).then(res => {
                res.data.forEach(data => {
                    that.goodsType.push(data);
                });
            });
        },

        // 商品列表w
        getGoodsList() {
            let listParams = this.template[3].content.ids;
            let that = this;
            that.goodsList = [];
            that.$api('goods.lists', { goods_ids: listParams })
                .then(res => {
                    if (res.code === 1) {
                        that.goodsList = [...that.goodsList, ...res.data.data];
                    }
                    this.ver = false;
                })
                .catch(err => {
                    this.ver = true;
                });
        },
        intoDetail() {
            uni.navigateTo({
                url: 'guanyuwomen',
            });
        },
        intofengge(name, id) {
            uni.navigateTo({
                url: 'jianyuefeng?name=' + name + '&id=' + id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
// 搜索
.search {
    position: relative;
    top: -500rpx;
    height: 100rpx;
    width: 750rpx;
    transition: all linear 0.3s;
    z-index: 999;

    .search-box {
        height: 64rpx;
        width: 700rpx;
        background: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        border-radius: 30rpx;

        .cuIcon-search {
            font-size: 36rpx;
            margin-right: 20rpx;
        }

        .search-val {
            font-size: 30rpx;
        }
    }
}
.two-box {
    display: flex;
    justify-content: space-between;
    width: 705rpx;
    padding: 20rpx 30rpx;
    background-color: #eae5d9;
    border-radius: 20rpx;
    margin: 20rpx auto;
    align-items: center;

    image {
        width: 150rpx;
        height: 150rpx;
    }
    .chakan {
        background-color: #918a6f;
        padding: 10rpx 20rpx;
        color: #ffffff;
        border-radius: 30rpx;
        font-size: 27upx;
    }
}
.swiper {
    display: flex;
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;

    image {
        width: 610rpx;
        height: 100%;
    }
    .jianyue {
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32upx;
        padding: 0 30rpx;
    }
}
// 猜你喜欢
.xihuan {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 705rpx;
    margin: 20rpx auto;

    .detail-box {
        width: 705rpx;
        margin-bottom: 30rpx;
        line-height: 50rpx;

        image {
            width: 100%;
            height: 400rpx;
            border-radius: 10rpx;
            background-color: #e7e7e7;
        }
    }
}
</style>
